<template>
  <span class="pt-light-matched">
    <template v-for="(splitText, i) in splitTexts"
      ><span v-if="i > 0" :style="{ color: lightColor }">{{ matchText }}</span
      >{{ splitText }}</template
    >
  </span>
</template>

<script lang="ts" setup>
import { computed } from "vue";
const props = defineProps<{
  lightColor: string;
  matchText: string;
  text: string;
}>();

const splitTexts = computed(() => {
  return props.text.split(props.matchText);
});
</script>
